import React, { PureComponent } from 'react';
import { PicturePreview } from 'ppfish';
import styles from './index.less';

class ImagesPreview extends PureComponent {
  constructor(props) {
    super(props);
    console.log('组件传值打印', this.props);
    this.state = {
      visible: false,
      activeIndex: 0,
    };
  }

  handleOpen = (index) => {
    this.setState({
      visible: true,
      activeIndex: index,
    });
  };

  handleClose = () => {
    this.setState({
      visible: false,
    });
  };

  render() {
    const { visible, activeIndex } = this.state;
    return (
      <div>
        <div className={styles.picpreview}>
          <div className={styles.pics}>
            {
              this.props.source && this.props.source.map((item, index) =>
                <div key={item.id} className={styles.item} onClick={this.handleOpen.bind(this, index)}>
                  <img src={item.url || item.src} alt={item.name} width="60px" height="60px"/>
                  <div className={styles.name}>{item.name}</div>
                </div>,
              )
            }
          </div>
        </div>
        <PicturePreview
          activeIndex={activeIndex}
          source={this.props.source}
          toolbar
          visible={visible}
          onClose={this.handleClose}
        />
      </div>
    );
  }
}

export default ImagesPreview;
